<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--vieport-->
	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
	<!--禁止将数字变为电话号码-->
	<meta name="format-detection" content="telephone=no" />
    <title>香港小生活</title>
    <meta name="keywords" content="香港小生活" />
    <meta name="description" content="香港小生活" />
    <!--页面样式格式化-->
    <link rel="stylesheet" href="static/css/reset.css" />
    <!--所有页面头部header和底部footer公用样式-->
    <link rel="stylesheet" href="static/css/public.css" />
    <script src="static/js/jquery.min.js"></script>
    <!--[if lt IE 9]> 
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
</head>  	
<body>
	<!--当前页面私有样式-->
	<link href="static/css/cate.css" rel="stylesheet">
	
	<div class="search">
		<form class="search_form" action="" method="post">
			<label for="search"></label>
			<input id="search" type="text" placeholder="超市升级88元10件" />
			<input type="submit" value="搜索"/>
		</form>
	</div>
	
	<div class="main_section">
		<div class="left">
			<ul class="cate">
				<li>
					<a href="#" class="active">美妆个护</a>
				</li>
				<li>
					<a href="#">食品饮料</a>
				</li>
				<li>
					<a href="#">服饰箱包</a>
				</li>
				<li>
					<a href="#">母婴玩具</a>
				</li>
				<li>
					<a href="#">家具生活</a>
				</li>
				<li>
					<a href="#">家用电器</a>
				</li>
				<li>
					<a href="#">蔬果生鲜</a>
				</li>
				<li>
					<a href="#">日用家纺</a>
				</li>
				<li>
					<a href="#">手机数码</a>
				</li>
				<li>
					<a href="#">食品饮料</a>
				</li>
				<li>
					<a href="#">服饰箱包</a>
				</li>
				<li>
					<a href="#">母婴玩具</a>
				</li>
				<li>
					<a href="#">家具生活</a>
				</li>
				<li>
					<a href="#">家用电器</a>
				</li>
				<li>
					<a href="#">蔬果生鲜</a>
				</li>
				<li>
					<a href="#">日用家纺</a>
				</li>
				<li>
					<a href="#">手机数码</a>
				</li>
			</ul>
		</div>
		<div class="right">
			<div class="itema">
				<div class="title">
					<h2>酒水乳饮</h2>
				</div>
				<ul class="list">
					<a href="#" class="item">
						<p class="pic">
							<img src="static/picture/product1.jpg" />
						</p>
						<span>常温乳品</span>
					</a>
					<a href="#" class="item">
						<p class="pic">
							<img src="static/picture/product2.jpg" />
						</p>
						<span>中外名酒</span>
					</a>
					<a href="#" class="item">
						<p class="pic">
							<img src="static/picture/product3.jpg" />
						</p>
						<span>饮料果汁</span>
					</a>
					<a href="#" class="item">
						<p class="pic">
							<img src="static/picture/product1.jpg" />
						</p>
						<span>常温乳品</span>
					</a>
					<a href="#" class="item">
						<p class="pic">
							<img src="static/picture/product2.jpg" />
						</p>
						<span>中外名酒</span>
					</a>
					<a href="#" class="item">
						<p class="pic">
							<img src="static/picture/product3.jpg" />
						</p>
						<span>饮料果汁</span>
					</a>
				</ul>
			</div>
			<div class="itema">
				<div class="title">
					<h2>休闲食品</h2>
				</div>
				<ul class="list">
					<a href="#" class="item">
						<p class="pic">
							<img src="static/picture/product4.jpg" />
						</p>
						<span>休闲零食</span>
					</a>
					<a href="#" class="item">
						<p class="pic">
							<img src="static/picture/product5.jpg" />
						</p>
						<span>糕饼膨化</span>
					</a>
					<a href="#" class="item">
						<p class="pic">
							<img src="static/picture/product6.jpg" />
						</p>
						<span>塘巧果冻</span>
					</a>
				</ul>
			</div>
			<div class="itema">
				<div class="title">
					<h2>冲调保养</h2>
				</div>
				<ul class="list">
					<a href="#" class="item">
						<p class="pic">
							<img src="static/picture/product7.jpg" />
						</p>
						<span>滋补保健品</span>
					</a>
					<a href="#" class="item">
						<p class="pic">
							<img src="static/picture/product8.jpg" />
						</p>
						<span>冲调饮品</span>
					</a>
					<a href="#" class="item">
						<p class="pic">
							<img src="static/picture/product9.jpg" />
						</p>
						<span>早餐食品</span>
					</a>
				</ul>
			</div>
		</div>
	</div>
	
	<!--底部tabbar部分-->
    <div class="tabbar">
    	<ul>
    		<li>
    			<a href="#">
    				<p>
    					<img class="default" src="static/images/tabbar_0.png" />
    					<img class="on" src="static/images/tabbar_0_on.png" />
    				</p>    				
    				<span>首页</span>
    			</a>
    		</li>
    		<li>
    			<a href="#" class="active">
    				<p>
    					<img class="default" src="static/images/tabbar_1.png" />
    					<img class="on" src="static/images/tabbar_1_on.png" />
    				</p>    				
    				<span>商品分类</span>
    			</a>
    		</li>
    		<li>
    			<a href="#">
    				<p>
    					<img class="default" src="static/images/tabbar_2.png" />
    					<img class="on" src="static/images/tabbar_2_on.png" />
    				</p>    				
    				<span>购物车</span>
    			</a>
    		</li>
    		<li>
    			<a href="#">
    				<p>
    					<img class="default" src="static/images/tabbar_3.png" />
    					<img class="on" src="static/images/tabbar_3_on.png" />
    				</p>    				
    				<span>我的</span>
    			</a>
    		</li>
    	</ul>
    </div>
    <script>
    	$('.tabbar ul a').click(function(){
    		$(this).parent('li').siblings('li').find('a').removeClass('active');
    		$(this).addClass('active');
    	});
    </script>
    <!--底部tabbar部分-->
    
    <script>
    	$(function(){
    		function getHeight(){
    			var winHeight = $(window).outerHeight(true);
	    		var topHeight = $('.search').outerHeight(true);
	    		var bottomHeight = $('.tabbar').outerHeight(true);
	    		var mainHeight = winHeight - topHeight - bottomHeight;
	    		$('.main_section').css('height',mainHeight + 'px');
    		}
    		getHeight();    		
    		window.onresize = function(){
    			getHeight();
    		}
    	});
    </script>
</body>
</html>
